Fix reflame deploys, add example visual tests #457
Conversation
Reflame doesn't currently support a public folder, partly because assets in public folders can't take advantage of content-hashes for semi-permanent caching.
|
@lewisl9029 is attempting to deploy a commit to the XMTP Labs Team on Vercel. A member of the Team first needs to authorize it. |
| // This package is specified as a git dependency: https://github.com/web3-storage/w3up/blob/d6978d7ab299be76987c6533d18e6857f6998fe6/packages/access-client/package.json#L113 | ||
| // which Reflame doesn't support yet | ||
| // Luckily looks like the only reason for doing this was to point to a fork that fixes types: https://github.com/fission-codes/one-webcrypto/commit/5148cd14d5489a8ac4cd38223870e02db15a2382 | ||
| // which is irrelevant to the Reflame deploy, so we can safely just point to the original package |
There was a problem hiding this comment.
Left some context here so we can remove this when they eventually upstream their types change.
| @@ -12,7 +12,7 @@ | |||
| width: 50px; | |||
| height: 50px; | |||
| transform: scale(0.1); | |||
| background-image: url("../../../../public/xmtp-icon.png"); | |||
| background-image: url("../../../images/xmtp-icon.png"); | |||
There was a problem hiding this comment.
Had to move this out of public folders since Reflame doesn't support it yet.
Part of the reason we don't support it yet is because assets in the public folder can't take advantage of content-hashing (e.g. turning xmtp-icon.png into xmtp-icon-somehash1234.png) to allow for semi-permanent caching without worrying about invalidation.
It didn't seem like any of the images currently in public needed to be there as far as I could tell, so I moved them out and updated all the references here. Let me know if you have concerns with this, happy to adjust.
|
|
||
| export const Avatar_test = <Avatar url={xmtpIconUrl} /> | ||
| export const AvatarWithAddress_test = <Avatar address="1234" /> | ||
| export const AvatarLoading_test = <Avatar isLoading /> |
There was a problem hiding this comment.
This is all it takes to add visual tests in Reflame! :)
You can see the results in the GitHub checks page: https://github.com/xmtp-labs/xmtp-inbox-web/pull/457/checks?check_run_id=22371292908
Happy to remove it if you don't plan on making use of this at all. But would love to have y'all try it out and hear what you think if you're up for it!
|
I believe e2e tests might be failing due to missing env vars since this PR is coming from a fork? Feel free to clone the branch over and open a separate PR internally if that makes things easier. |
|
Deployment failed with the following error: |
|
closing this PR for now as this repo is currently in maintenance mode. |
This PR fixes the broken Reflame deploys on dev. It was caused by a few things:
Also took this opportunity to set up a few visual tests for the Avatar component to show y'all how testing works in Reflame works. Happy to remove it if you don't feel it's adding any value, but I'd love to get y'all to try it out for a bit and hear your thoughts if it's something you're interested in!
In addition to these basic screenshot tests, Reflame can also do interaction tests, let me know if you're interested in giving that a try to, happy to provide some examples to get y'all started. Cheers!